<template>
  <!-- ref获取这个真实dom 用于校验数据-->
    <a-form-model :model="form" ref="ruleForm" :label-col="{span:4}" :wrapper-col="{span:14}"
    class="form-container"
    :rules="rules"
    >
    <a-form-model-item label="标题" prop="title" required>
      <a-input v-model="form.title" />
    </a-form-model-item>
    <a-form-model-item label="商品描述" prop="desc">
      <a-input v-model="form.desc" />
    </a-form-model-item>
    <a-form-model-item label="商品类目" prop="category" required>
      <a-select v-model="form.category" placeholder="请选择商品类目" @change="changeHandle">
        <a-select-option :value="i.id" v-for="i in categoryList" :key="i.id">
          {{ i.name }}
        </a-select-option>
      </a-select>
      <a-select v-model="form.c_item" placeholder="请选择细分商品类目">
        <a-select-option v-for="c in oneCategoryList" :key="c.name" :value="c">
         {{ c }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="商品标签" prop="tags" required>
      <a-select
      mode="tags"
      v-model="form.tags"
      :default-value="['包邮,次日达']"
    >
      <a-select-option value="包邮,次日达">
       包邮,次日达
      </a-select-option>
    </a-select>
    </a-form-model-item>

    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">
        下一步
      </a-button>

    </a-form-model-item>
  </a-form-model>
</template>

<script>
import api from '@/api/category';

export default {
  props: ['form'],
  data() {
    return {
      categoryList: [],
      oneCategoryList: [],
      rules: {},
    };
  },
  created() {
    api.list().then((res) => {
      this.categoryList = res.data.data;
    });
  },
  methods: {
    changeHandle(val) {
      for (let i = 0; i < this.categoryList.length; i += 1) {
        if (this.categoryList[i].id === val) {
          this.oneCategoryList = this.categoryList[i].c_items;
        }
      }
      console.log(this.oneCategoryList);
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('next', this.form);

          return true;
        }
        console.log('error submit!!');
        return false;
      });
    },
  },
};
</script>

<style scoped>
  .form-container{
    width: 70%;
    margin: 0 auto;
  }
</style>
